<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>评价摄影师</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #07c160;
      --secondary-color: #f8f8f8;
      --text-color: #333;
      --light-text: #666;
      --border-color: #eaeaea;
      --success-color: #07c160;
      --danger-color: #fa5151;
      --warning-color: #ffc300;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text-color);
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      line-height: 1.5;
    }
    
    .container {
      max-width: 100%;
      padding: 0;
      overflow-x: hidden;
    }
    
    /* 顶部导航栏 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      background-color: #fff;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 0 15px;
    }
    
    .navbar-title {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      flex: 1;
    }
    
    .navbar-back {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
    
    /* 内容区块样式 */
    .content-block {
      background-color: white;
      margin: 10px 0;
      padding: 15px;
    }
    
    .block-title {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 15px;
    }
    
    /* 摄影师信息样式 */
    .photographer-info {
      display: flex;
      align-items: center;
      padding: 15px;
      background-color: white;
      margin-bottom: 10px;
    }
    
    .photographer-avatar {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      object-fit: cover;
      margin-right: 15px;
    }
    
    .photographer-name {
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    /* 评分样式 */
    .rating-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
    }
    
    .rating-title {
      font-size: 16px;
      margin-bottom: 15px;
    }
    
    .star-rating {
      font-size: 30px;
      color: #e0e0e0;
      cursor: pointer;
    }
    
    .star-rating i {
      margin: 0 5px;
    }
    
    .star-rating .active {
      color: #ffd700;
    }
    
    .rating-desc {
      margin-top: 10px;
      font-size: 14px;
      color: var(--light-text);
    }
    
    /* 评价表单样式 */
    .review-form {
      padding: 15px;
      background-color: white;
    }
    
    .form-group {
      margin-bottom: 15px;
    }
    
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 500;
    }
    
    .form-input {
      width: 100%;
      padding: 10px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
      resize: none;
      box-sizing: border-box;
    }
    
    .form-input:focus {
      outline: none;
      border-color: var(--primary-color);
    }
    
    /* 上传照片样式 */
    .upload-photos {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    
    .upload-item {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      background-color: var(--secondary-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
    }
    
    .upload-item i {
      font-size: 24px;
      color: var(--light-text);
    }
    
    .upload-item-text {
      font-size: 12px;
      color: var(--light-text);
      margin-top: 5px;
    }
    
    .uploaded-photo {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
    }
    
    .uploaded-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .delete-photo {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 20px;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 12px;
      cursor: pointer;
    }
    
    /* 标签选择样式 */
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    
    .tag-item {
      padding: 6px 12px;
      border-radius: 16px;
      background-color: var(--secondary-color);
      font-size: 13px;
      color: var(--text-color);
      cursor: pointer;
    }
    
    .tag-item.active {
      background-color: #e6f7ef;
      color: var(--primary-color);
      font-weight: 500;
    }
    
    /* 提交按钮样式 */
    .submit-block {
      padding: 15px;
      background-color: white;
      position: sticky;
      bottom: 0;
      border-top: 1px solid var(--border-color);
    }
    
    .submit-btn {
      width: 100%;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 4px;
      padding: 12px 0;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
    
    .submit-btn:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
    
    /* 匿名选项样式 */
    .anonymous-option {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
    
    .anonymous-checkbox {
      margin-right: 8px;
    }
    
    .anonymous-label {
      font-size: 14px;
      color: var(--light-text);
    }
    
    /* 整体页面容器 */
    .page-container {
      padding-bottom: 80px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="navbar">
      <div onclick="goBack()">
        <i class="fas fa-chevron-left navbar-back"></i>
      </div>
      <div class="navbar-title">评价摄影师</div>
      <div style="width: 24px;"></div>
    </div>
    
    <div class="page-container">
      <!-- 摄影师信息 -->
      <div class="photographer-info">
        <img src="https://img.freepik.com/free-photo/attractive-stylish-young-woman-with-photo-camera_171337-9870.jpg" alt="摄影师头像" class="photographer-avatar">
        <div>
          <div class="photographer-name">艾米丽摄影工作室</div>
          <div style="font-size: 13px; color: var(--light-text);">专业人像摄影师</div>
        </div>
      </div>
      
      <!-- 评分 -->
      <div class="content-block">
        <div class="rating-block">
          <div class="rating-title">为摄影师打分</div>
          <div class="star-rating" id="star-rating">
            <i class="fas fa-star active" data-rating="1"></i>
            <i class="fas fa-star active" data-rating="2"></i>
            <i class="fas fa-star active" data-rating="3"></i>
            <i class="fas fa-star active" data-rating="4"></i>
            <i class="fas fa-star active" data-rating="5"></i>
          </div>
          <div class="rating-desc" id="rating-desc">非常满意</div>
        </div>
      </div>
      
      <!-- 评价内容 -->
      <div class="content-block">
        <div class="form-group">
          <label class="form-label">评价内容</label>
          <textarea class="form-input" id="review-content" rows="4" placeholder="请分享您的拍摄体验，帮助他人做出选择..."></textarea>
          <div style="display: flex; justify-content: flex-end; margin-top: 5px; font-size: 12px; color: var(--light-text);">
            <span id="char-count">0</span>/200
          </div>
        </div>
      </div>
      
      <!-- 上传照片 -->
      <div class="content-block">
        <div class="block-title">上传照片（选填）</div>
        <div class="upload-photos">
          <!-- 已上传照片示例 -->
          <div class="uploaded-photo">
            <img src="https://img.freepik.com/free-photo/portrait-of-beautiful-woman-with-smokey-eyes-makeup_186202-5473.jpg" alt="照片1">
            <div class="delete-photo" onclick="deletePhoto(1)">
              <i class="fas fa-times"></i>
            </div>
          </div>
          
          <div class="uploaded-photo">
            <img src="https://img.freepik.com/free-photo/portrait-of-cheerful-woman_171337-4648.jpg" alt="照片2">
            <div class="delete-photo" onclick="deletePhoto(2)">
              <i class="fas fa-times"></i>
            </div>
          </div>
          
          <!-- 上传按钮 -->
          <div class="upload-item" onclick="uploadPhoto()">
            <i class="fas fa-camera"></i>
            <div class="upload-item-text">上传照片</div>
          </div>
        </div>
      </div>
      
      <!-- 标签选择 -->
      <div class="content-block">
        <div class="block-title">选择评价标签（选填）</div>
        <div class="tag-list">
          <div class="tag-item" onclick="toggleTag(this)">摄影技术专业</div>
          <div class="tag-item" onclick="toggleTag(this)">服务态度好</div>
          <div class="tag-item" onclick="toggleTag(this)">按时交付</div>
          <div class="tag-item" onclick="toggleTag(this)">沟通顺畅</div>
          <div class="tag-item" onclick="toggleTag(this)">修图效果好</div>
          <div class="tag-item" onclick="toggleTag(this)">性价比高</div>
          <div class="tag-item" onclick="toggleTag(this)">有耐心</div>
          <div class="tag-item" onclick="toggleTag(this)">指导pose到位</div>
        </div>
      </div>
      
      <!-- 订单满意度 -->
      <div class="content-block">
        <div class="block-title">订单满意度评价</div>
        <div class="form-group">
          <label class="form-label">拍摄环境</label>
          <div class="star-rating" style="font-size: 24px;" id="environment-rating">
            <i class="fas fa-star" data-rating="1"></i>
            <i class="fas fa-star" data-rating="2"></i>
            <i class="fas fa-star" data-rating="3"></i>
            <i class="fas fa-star" data-rating="4"></i>
            <i class="fas fa-star" data-rating="5"></i>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">服务态度</label>
          <div class="star-rating" style="font-size: 24px;" id="service-rating">
            <i class="fas fa-star" data-rating="1"></i>
            <i class="fas fa-star" data-rating="2"></i>
            <i class="fas fa-star" data-rating="3"></i>
            <i class="fas fa-star" data-rating="4"></i>
            <i class="fas fa-star" data-rating="5"></i>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">照片质量</label>
          <div class="star-rating" style="font-size: 24px;" id="quality-rating">
            <i class="fas fa-star" data-rating="1"></i>
            <i class="fas fa-star" data-rating="2"></i>
            <i class="fas fa-star" data-rating="3"></i>
            <i class="fas fa-star" data-rating="4"></i>
            <i class="fas fa-star" data-rating="5"></i>
          </div>
        </div>
      </div>
      
      <!-- 匿名选项 -->
      <div class="content-block">
        <div class="anonymous-option">
          <input type="checkbox" id="anonymous-checkbox" class="anonymous-checkbox">
          <label for="anonymous-checkbox" class="anonymous-label">匿名评价</label>
        </div>
      </div>
      
      <!-- 提交按钮 -->
      <div class="submit-block">
        <button class="submit-btn" onclick="submitReview()">提交评价</button>
      </div>
    </div>
  </div>
  
  <script>
    // 返回上一页
    function goBack() {
      history.back();
    }
    
    // 当前评分
    let currentRating = 5;
    let environmentRating = 0;
    let serviceRating = 0;
    let qualityRating = 0;
    
    // 页面加载完成后初始化事件
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化主评分
      const starRating = document.getElementById('star-rating');
      const stars = starRating.querySelectorAll('i');
      
      stars.forEach(star => {
        star.addEventListener('click', function() {
          const rating = parseInt(this.dataset.rating);
          updateStarRating(stars, rating);
          currentRating = rating;
          updateRatingDesc(rating);
        });
        
        star.addEventListener('mouseover', function() {
          const rating = parseInt(this.dataset.rating);
          updateStarRating(stars, rating);
        });
        
        star.addEventListener('mouseout', function() {
          updateStarRating(stars, currentRating);
        });
      });
      
      // 初始化环境评分
      initSubRating('environment-rating');
      
      // 初始化服务态度评分
      initSubRating('service-rating');
      
      // 初始化照片质量评分
      initSubRating('quality-rating');
      
      // 字符计数器
      const reviewContent = document.getElementById('review-content');
      const charCount = document.getElementById('char-count');
      
      reviewContent.addEventListener('input', function() {
        const count = this.value.length;
        charCount.textContent = count;
        
        if (count > 200) {
          this.value = this.value.slice(0, 200);
          charCount.textContent = 200;
        }
      });
    });
    
    // 初始化子评分
    function initSubRating(elementId) {
      const ratingElement = document.getElementById(elementId);
      const stars = ratingElement.querySelectorAll('i');
      let selectedRating = 0;
      
      stars.forEach(star => {
        star.addEventListener('click', function() {
          const rating = parseInt(this.dataset.rating);
          updateStarRating(stars, rating);
          selectedRating = rating;
          
          // 更新对应变量
          if (elementId === 'environment-rating') {
            environmentRating = rating;
          } else if (elementId === 'service-rating') {
            serviceRating = rating;
          } else if (elementId === 'quality-rating') {
            qualityRating = rating;
          }
        });
        
        star.addEventListener('mouseover', function() {
          const rating = parseInt(this.dataset.rating);
          updateStarRating(stars, rating);
        });
        
        star.addEventListener('mouseout', function() {
          updateStarRating(stars, selectedRating);
        });
      });
    }
    
    // 更新星级显示
    function updateStarRating(stars, rating) {
      stars.forEach((star, index) => {
        if (index < rating) {
          star.classList.add('active');
        } else {
          star.classList.remove('active');
        }
      });
    }
    
    // 更新评分描述
    function updateRatingDesc(rating) {
      const ratingDesc = document.getElementById('rating-desc');
      
      switch(rating) {
        case 1:
          ratingDesc.textContent = '非常不满意';
          break;
        case 2:
          ratingDesc.textContent = '不满意';
          break;
        case 3:
          ratingDesc.textContent = '一般';
          break;
        case 4:
          ratingDesc.textContent = '满意';
          break;
        case 5:
          ratingDesc.textContent = '非常满意';
          break;
      }
    }
    
    // 删除照片
    function deletePhoto(id) {
      if (confirm('确定要删除这张照片吗？')) {
        // 实际应用中这里会调用接口删除照片
        const photoElement = event.currentTarget.parentElement;
        photoElement.remove();
      }
    }
    
    // 上传照片
    function uploadPhoto() {
      // 实际应用中这里会调用相册选择或相机接口
      alert('调用相册/相机接口（在实际应用中会唤起相册或相机）');
    }
    
    // 切换标签
    function toggleTag(tagElement) {
      tagElement.classList.toggle('active');
    }
    
    // 提交评价
    function submitReview() {
      const reviewContent = document.getElementById('review-content').value;
      
      if (!reviewContent.trim()) {
        alert('请填写评价内容');
        return;
      }
      
      if (environmentRating === 0 || serviceRating === 0 || qualityRating === 0) {
        alert('请完成所有评分项');
        return;
      }
      
      // 获取已选标签
      const selectedTags = [];
      document.querySelectorAll('.tag-item.active').forEach(tag => {
        selectedTags.push(tag.textContent);
      });
      
      // 是否匿名
      const isAnonymous = document.getElementById('anonymous-checkbox').checked;
      
      // 构建评价数据
      const reviewData = {
        overallRating: currentRating,
        content: reviewContent,
        environmentRating,
        serviceRating,
        qualityRating,
        tags: selectedTags,
        isAnonymous
      };
      
      console.log('提交的评价数据:', reviewData);
      
      // 模拟评价成功
      alert('评价提交成功！感谢您的反馈。');
      
      // 返回订单页
      window.location.href = 'my_orders.html';
    }
  </script>
</body>
</html> 